<!--
 * @Author: your name
 * @Date: 2021-07-16 15:25:59
 * @LastEditTime: 2021-07-20 20:26:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \project-128-10\src\module-hmmm\pages\questions-choice.vue
-->
<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 字体和成功按钮 -->
      <div>
        <el-row>
          <el-col :span="20">
            <p class="explain">
              说明：目前支持学科和关键字条件筛选
            </p>
          </el-col>
          <el-col :span="4">
            <el-button
              class="button"
              icon="el-icon-edit"
              size="small"
              type="success"
              @click="addSubject"
            >新增试题</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表单 -->
      <div class="form">
        <el-row>
          <el-form
            ref="form"
            label-width="80px"
            size="small"
          >
            <!-- 第一列 -->
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  placeholder="请选择"
                  style="width: 100%;"
                  @change="subjectsListChange()"
                  v-model="subjectForm.subjectID"
                >
                  <el-option
                    v-for="(item) in subjectsList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试题类型">
                <el-select
                  placeholder="请选择"
                  style="width: 100%;"
                  v-model="subjectForm.subjectType"
                >
                  <el-option
                    v-for="item in subjectType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题目备注">
                <el-input v-model="subjectForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <!-- 第二列 -->
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  placeholder="请选择"
                  style="width: 100%;"
                  v-model="subjectForm.catalogID"
                >
                  <el-option
                    v-for="item in List"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度">
                <el-select
                  placeholder="请选择"
                  style="width: 100%;"
                  v-model="subjectForm.difficulty"
                >
                  <el-option
                    v-for="item in subjectHard"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="企业简称">
                <el-input v-model="subjectForm.shortName"></el-input>
              </el-form-item>
            </el-col>
            <!-- 第三列 -->
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  placeholder="请选择"
                  style="width: 100%;"
                  v-model="subjectForm.tags"
                >
                  <el-option
                    v-for="item in tagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="方向">
                <el-select
                  placeholder="请选择"
                  style="width: 100%;"
                  v-model="subjectForm.direction"
                >
                  <el-option
                    v-for="item in direction"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市">
                <el-row
                  type="flex"
                  justify="space-around"
                >
                  <el-col :span="12">
                    <el-select
                      placeholder="请选择"
                      style="width: 96%;"
                      @change="changecity"
                      v-model="subjectForm.city"
                    >
                      <el-option
                        v-for="item in cityList"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select
                      placeholder="请选择"
                      style="width: 96%;"
                      v-model="subjectForm.province"
                    >
                      <el-option
                        v-for="item in area"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>

              </el-form-item>
            </el-col>
            <!-- 第四列 -->
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="subjectForm.keyword"></el-input>
              </el-form-item>
              <el-form-item label="录入人">
                <el-select
                  placeholder="请选择"
                  style="width: 100%;"
                  v-model="subjectForm.creatorID"
                >
                  <el-option
                    v-for="item in simpleList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-row
                  type="flex"
                  justify="end"
                >
                  <el-col :span="7">
                    <el-button @click="clearForm">清除</el-button>
                  </el-col>
                  <el-col :span="7">
                    <el-button type="primary" @click="search()">搜索</el-button>
                  </el-col>
                </el-row>
              </el-form-item>

            </el-col>
          </el-form>
        </el-row>
      </div>
      <!-- Tab栏 -->
      <div class="content">
        <el-tabs
          type="card"
          @tab-click="tabClick"
          v-model="activeName"
        >
          <el-tab-pane
            label="全部"
            name="first"
          >
            <!-- <template #default>
              <tables  />
            </template> -->
          </el-tab-pane>
          <el-tab-pane
            label="待审核"
            name="second"
          >
            <!-- <template #default>
              <tables />
            </template> -->
          </el-tab-pane>
          <el-tab-pane
            label="已审核"
            name="third"
          >
            <!-- <template #default>
              <tables />
            </template> -->
          </el-tab-pane>
          <el-tab-pane
            label="已拒绝"
            name="fourth"
          >
            <!-- <template #default>
              <tables :choiceList="choiceList" />
            </template> -->
          </el-tab-pane>
          <tables :total="total" @delSubject="delSubject" :choiceList="choiceList" @upChoiceList="getChoiceList(subjectForm)" />

        </el-tabs>
      </div>
      <!-- 分页 -->
      <!-- //currentPage -->
      <div class="page">
        <el-pagination
          background
          :pager-count="5"
<<<<<<< HEAD
          :page-sizes="[10,20,30,40,50]"
=======
          :page-sizes="[5,10,15,20,50]"
>>>>>>> 0f8700ca589260ec0db10060f097e7771cf326d4
          @size-change="sizeChange"
          :current-page.sync="currentPage"
          @current-change="currentChange"
          layout="prev, pager, next,sizes,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// Tables组件
import Tables from '../components/tables.vue'
// 学科接口
import { simple as subjectsSimpleList } from '@/api/JXTK/subjects.js'
// 二级目录接口
import { simple as catalogList } from '@/api/JXTK/directorys.js'
// 调用删除接口
import { remove as removeSubject } from '@/api/JXTK/questions.js'
// 获取接口
import { simple as tagsList } from '@/api/JXTK/tags.js'
// 录入人，精品题库
import { simple, choiceList } from '@/api/JXTK/siftBack.js'
// 获取城市地区数据
import { provinces, citys } from '@/api/hmmm/citys.js'
// 题型，难度，等数据
import { questionType, difficulty, direction } from '@/api/hmmm/constants'

export default {
  components: {
    Tables
  },
  data () {
    return {
      activeName: 'first', // 选项卡默认的
      value: '',
      subjectForm: {
        // 表单对象
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 标题备注
        shortName: null, // 企业简称
        city: null, // 城市
        province: null, // 地方
        chkState: null, // 审核的状态
        page: 1, // 当前页码
        pagesize: 5// 每页的条数
      },
      total: 10, // 记录总条数
      currentPage: 1, // 记录页码的高亮
      subjectsList: [], // 学科列表数据
      List: [], // 二级目录列表数据
      tagsList: [], // 标签下拉列表
      subjectType: questionType, // 试题类型
      subjectHard: difficulty, // 难度
      direction: direction, // 方向
      simpleList: [], // 录入人列表
      cityList: provinces(), // 城市下拉框列表
      area: [], // 地区下拉框列表
      choiceList: [], // 精品题库列表数据
      recordPageSize: '', // 记录每页条数
      chkState: null// 记录审核的状态
    }
  },
  mounted () {
    this.getSubjectsList()
    this.getsimpleList()
    // 调用获取精品列表的函数
    console.log(this.subjectForm)
    this.getChoiceList(this.subjectForm)
  },
  methods: {
    // handleClick (tab, event) {
    //   console.log(tab, event)
    // },
    // 获取学科列表
    async getSubjectsList () {
      const res = await subjectsSimpleList()
      this.subjectsList = res.data
    },
    // 获取二级目录
    async getSubjectsSimpleList () {
      const res = await catalogList({ subjectID: this.subjectForm.subjectID })
      // console.log(res)
      this.List = res.data
    },
    // 获取标签列表
    async getTagsList () {
      const res = await tagsList({ subjectID: this.subjectForm.subjectID })
      console.log(res)
      this.tagsList = res.data
    },
    // 当学科列表发生改变的时候执行
    subjectsListChange () {
      this.subjectForm.catalogID = ''
      this.subjectForm.tags = ''
      this.getSubjectsSimpleList()
      this.getTagsList()
    },
    // 录入人列表
    async getsimpleList () {
      const res = await simple()
      // console.log(res)
      this.simpleList = res.data
    },
    // 城市下拉框改变的时候
    changecity (city) {
      this.subjectForm.province = null
      this.area = citys(city)
    },
    // 点击清除按钮
    clearForm () {
      this.subjectForm = {
        // 表单对象
        // 表单对象
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 标题备注
        shortName: null, // 企业简称
        city: null, // 城市
        province: null, // 地方
        chkState: this.chkState || null, // 审核的状态
        page: 1, // 当前页码
        pagesize: this.recordPageSize || 5// 每页的条数,点击清除按钮把pagesize的初始值设为每页显示条数的值，没有设为1
      }
    },
    // 点击添加按钮
    addSubject () {
      // 1、跳转路由
      this.$router.push(
        {
          path: '/questions/new'
        }
      )
    },
    // 获取精品题库列表数据
    async getChoiceList (data) {
      const res = await choiceList(data)
      this.choiceList = res.data.items
      this.total = res.data.counts
    },
    // 点击tab栏切换
    tabClick (tab) {
      // 点击tab切换默认请求第一页的数据
      this.subjectForm.page = 1
      // 第一高亮
      this.currentPage = 1
      if (tab.label === '全部') {
        this.subjectForm.chkState = null
        this.getChoiceList(this.subjectForm)
      } else if (tab.label === '待审核') {
        this.subjectForm.chkState = 0
        this.getChoiceList(this.subjectForm)
      } else if (tab.label === '已审核') {
        this.subjectForm.chkState = 1
        this.getChoiceList(this.subjectForm)
      } else if (tab.label === '已拒绝') {
        this.subjectForm.chkState = 2
        this.getChoiceList(this.subjectForm)
      }
      // 记录审核状态，当点击删除按钮的时候，
      this.chkState = this.subjectForm.chkState
    },
    // 点击搜索按钮
    search () {
      // if (this.subjectForm.subjectID !== '') {
      //   // 调用每页条数发生改变的时候的函数
      //   // 1 获取第一页的数据,改变要获取获取数据的页码
      //   this.subjectForm.page = 1
      //   // 2、把分页器的默认选中项改为第一页
      //   this.currentPage = 1
      //   // 3、重新拉取数据
      //   console.log(this.subjectForm)
      //   this.getChoiceList(this.subjectForm)
      // // 4清空表单的内容
      // // this.clearForm()
      // } else {
      //   this.sizeChange()
      // }
      // console.log(this.subjectForm)
      // 点击搜索按钮的时候,第一页高亮，请求第一页的数据
      console.log(this.subjectForm.chkState)
      // 1、第一页高亮显示
      this.currentPage = 1
      // 2、请求第一页的数据
      this.subjectForm.page = 1
      this.getChoiceList(this.subjectForm)
    },
    // 每页条数发生改变的时候
    // 当每页显示的条数发生改变的时候先声明一个变量存储起来(当点击删除按钮的时候,设置删除后的初始值)
    // 在赋值给表单对象pagesize 属性一份，作为请求数据的条数，
    // 当页码改变的时候获取第一页的数据(page改为1)
    // 第一页高亮显示
    sizeChange (size) {
      // if (size !== undefined) {
      // 1、 把当前的每页显示的条数存储到一个变量中，点击删除按钮的时候赋值给表单pagesize
      this.recordPageSize = size
      // }
      //  2、把每页获取的条数赋值表单对象
      this.subjectForm.pagesize = size
      // 3、获取第一业数据
      this.subjectForm.page = 1
      // 4、跳转到第一页
      this.currentPage = 1
      // 5、获取表单数据
      this.getChoiceList(this.subjectForm)
    },
    // 页码发生改变的时候
    // 当页面发生改变的时候将current(当前页码赋值给表单对象的page)请求当前页码对应的数据
    currentChange (current) {
      // 1、将当前选中的页码赋值给表单数据
      this.subjectForm.page = current
      // 2、请求表单数据
      this.getChoiceList(this.subjectForm)
    },
    // 在表格中点击删除执行的函数
    delSubject (id) {
      // 1、 提示用户是否要删除
      this.$confirm('确定要删除此试题码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 2、调用删除试题接口
        const res = await removeSubject({ id })
        console.log(res)
        // 3、删除成功重新渲染列表数据
        this.subjectForm.page = 1
        this.getChoiceList(this.subjectForm)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped >
.box-card {
  margin: 10px;
}
.explain {
  float: left;
  font-size: 12px;
  color: pink;
}
.button {
  float: right;
}
/* 分页 */
.page {
  float: right;
  margin-top: 20px;
}
/* 表单 */
.form {
  margin-top: 10px;
}
</style>
